import * as React from "react"
import { useHistory, useLocation } from "react-router-dom"
import {
  Table,
  Form,
  Button,
  Menu,
  Dropdown,
  message,
} from "antd"
import { SettingOutlined, PlusOutlined } from "@ant-design/icons"
import { ColumnProps } from "antd/lib/table"
import style from "./style.module.css"
import { companySize, ICompany, FinanceStage, SkuStatus } from "../../types"
import Edit from "../CompanyEdit/Edit"
import * as api from '../../services/api'
import { toFontCompanySize, toFontFinanceStage, toFontStatus } from "../../pages/util"

export default function Company(data: ICompany[], getData: () => void, isSuper = false) {
  const [record, setRecord] = React.useState<ICompany>()
  const path = useLocation().pathname
  const history = useHistory()
  const [visible, setVisible] = React.useState<boolean>(false)
  //是否决定传入record参数
  const [flag, setFlag] = React.useState<boolean>(true)

  //如果外面没有调用record,编辑就不能渲染record
  console.log(flag ? record : 'hh')
  const columns: ColumnProps<ICompany>[] = [
    {
      title: '企业logo',
      dataIndex: 'logo',
      width: 150,
      align: 'center',
      render: value => <img src={value} width="120" alt='' />
    },
    {
      title: '企业名称',
      dataIndex: 'companyShortName',
      width: 100
    },
    {
      title: '企业规模',
      dataIndex: 'companySize',
      width: 100,
      render: (value: companySize) => {
        if (value !== null) {
          return toFontCompanySize(value)
        } else return null
      }
    },
    {
      title: '企业类型',
      dataIndex: 'industryField',
      width: 100
    },
    {
      title: '创建时间',
      dataIndex: 'time'
    },
    {
      title: '更新时间',
      dataIndex: 'updateAt'
    },
    {
      title: '发布状态',
      dataIndex: 'isDisabled',
      width: 100,
      render: (value: SkuStatus) => {
        if (value !== null) {
          return toFontStatus(value)
        } else return null
      }
    },
    {
      title: '融资情况',
      dataIndex: 'financeStage',
      render: (value: FinanceStage) => {
        if (value !== null) {
          return toFontFinanceStage(value)
        } else return null
      }
    },
    {
      title: '操作',
      key: 'opt',
      width: 150,
      align: 'center',
      render: (val, record) => {
        return (
          <Dropdown
            overlay={
              <Menu>
                {!isSuper && <Menu.Item
                  key="view"
                  onClick={() =>
                    history.push(
                      `${path}/view/${record._id}`
                    )
                  }
                >
                  查看公司详细
                </Menu.Item>}
                {!isSuper && <Menu.Item
                  key="user"
                  onClick={() =>
                    history.push(
                      `${path}/${record._id}/user`
                    )
                  }
                >
                  查看公司成员
                </Menu.Item>}
                {!isSuper && <Menu.Item key="edit" onClick={() => {
                  setRecord(record)
                  setVisible(!visible)
                }}>
                  编辑公司信息
                </Menu.Item>}
                {isSuper && <Menu.Item key="delete" onClick={async () => {
                  const res = await api.removeCompany(record._id)
                  if (res.stat === 'OK') {
                    message.success('删除成功')
                  } else if (res.stat === 'ERR_NOT_FOUND') {
                    message.error('已被禁用，无需删除')
                  }
                  getData()
                }}>
                  删除公司
                </Menu.Item>}
                {isSuper && <Menu.Item key="status" onClick={async () => {
                  const res = await api.statusCompany(record._id)
                  if (res.stat === 'OK') {
                    message.success('更改公司状态成功')
                  }
                  getData()
                }}>
                  更改公司状态
                </Menu.Item>}


              </Menu>
            }
          >
            <Button icon={<SettingOutlined />} />
          </Dropdown>
        )
      }
    }
  ]
  return (
    <>
      {!isSuper && <Form layout="inline" className={style.toolbar}>
        <Form.Item>
          <Button
            type="primary"
            onClick={() => {
              setFlag(false)
              setVisible(!visible)
            }}
            icon={<PlusOutlined />}
          >
            创建企业
          </Button>
        </Form.Item>
      </Form>}
      <Table
        dataSource={data}
        rowKey="_id"
        columns={columns}
      />
      {visible && (
        <Edit
          getData={getData}
          record={flag ? record : undefined}
          afterClose={() => {
            setVisible(false)
            setFlag(true)
          }}
        />
      )}
    </>
  )
}
